<template>
  <button @click="btnClick" ref="btnRef">点击</button>
  <hr />
  <Son ref="SonRef"></Son>
</template>

<script>
import { computed, ref, watch, watchEffect } from 'vue'
import Son from './Son.vue'
export default {
  components: { Son },
  setup() {
    const btnRef = ref(null)
    const SonRef = ref(null)
    // setup函数内部在元素挂载之前，无法拿到元素
    console.log(SonRef.value)
    watchEffect(() => {
      console.log('watchEffect111的监听SonRef', SonRef.value)
      console.log('watchEffect111的监听btnRef', btnRef.value)
    })
    
    watchEffect(
      () => {
        console.log('watchEffect222的监听SonRef', SonRef.value)
        console.log('watchEffect222的监听btnRef', btnRef.value)
      },
      {
        // 在函数内部需要使用dom元素时使用
        //  flush: 'pre'为默认值提前执行
        // flush: 'post',为dom挂载完成之后执行
        // flush: 'pre',
        flush: 'post',
      }
    )
    const btnClick = () => {
      console.log('按钮被点击了', btnRef.value)
      console.log('按钮被点击了', SonRef.value)
      SonRef.value.sonClick()
    }
    return { btnClick, btnRef, SonRef }
  },
}
</script>
<style scoped></style>
